<template>
    <div class="message">
      <h2>留言板信息</h2>

      <!-- 留言列表表格 -->
      <table>
        <thead>
          <tr>
            <th>用户名</th>
            <th>留言内容</th>
            <th>发布时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(message, index) in filteredMessages" :key="index">
            <td>{{ message.username }}</td>
            <td>
              {{ message.message.length > 10 ? message.message.slice(0, 10) + '...' : message.message }}
              <button @click="showFullMessage(message.message)">显示全部</button>
            </td>
            <td>{{ message.createdAt }}</td>
            <td>
              <button @click="deleteMessagez(message.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
  
      <!-- 显示完整留言内容的新界面 -->
      <div v-if="dialogVisible" class="dialog-overlay">
        <div class="dialog">
          <span class="close" @click="dialogVisible = false">&times;</span>
          <h3>留言内容</h3>
          <p>{{ fullMessage }}</p>
          <br/>
        </div>
      </div>

      <div v-if="deletedMessageManagement" class="message1">{{ deletedMessageManagement }}</div>
      <div v-if="filteredMessages.length === 0">
        <p>目前没有符合条件的留言板信息。</p>
    </div>
    </div>
  </template>
  
  <script>
  import {findAllMessage, deleteMessage1, deleteMessage} from '../../api/admins';
  export default {
    name: 'MessageBoard',
    data() {
      return {
        messages: [

        ],
        searchQuery: '',
        dialogVisible: false,
        fullMessage: '',
        deletedMessageManagement:''
      };
    },
    computed: {
      filteredMessages() {
        return this.messages.filter(item => item.message.includes(this.searchQuery) || item.username.includes(this.searchQuery));
      },
    },
    methods: {
      async deleteMessagez(index) {



          await deleteMessage1(index);
          this.deletedMessageManagement = '留言已删除！';
          alert('留言已删除！')
          setTimeout(() => {
            this.deletedMessageManagement = '';
          }, 2000);
//刷新


          this.fetchMessages();
      },
      async fetchMessages() {
        try {
          const response = await findAllMessage();
          console.log('Messages:', response.data.data);
          this.messages = response.data.data;
        } catch (error) {
          console.error('Error fetching messages:', error);
        }
      },
      handleSearch() {
      },
  
      showFullMessage(message) {
        this.fullMessage = message;
        this.dialogVisible = true;
      },
  
      confirmDelete(message) {
        const confirmation = confirm('是否确认删除该公告?');
        if (confirmation) {
          this.deleteMessage(message);
        }
      },
      deleteMessage(message) {
        const index = this.messages.findIndex(p => p.id === message.id);
        if (index !== -1) {
            this.messages.splice(index, 1);
            this.deletedMessageManagement = `留言板已删除！`;
            // 2秒后清除提示信息
            setTimeout(() => {
              this.deletedMessageManagement = '';
            }, 2000);
         }
      },
    },
    mounted() {
      this.fetchMessages();
    }
  };
  </script>
  
  <style scoped>
  .message {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
    font-family: 'Arial', sans-serif;
    background-color: #f7f7f7;
  }
  h2 {
    font-size: 24px;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
  }

  .search-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  .search-bar input {
    padding: 10px;
    width: 300px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: border-color 0.3s ease;
  }
  .search-bar input:focus {
    border-color: #5b9bd5;
    outline: none;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  .table-row:hover {
    background-color: #f9f9f9;
  }
  th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
  th {
    background-color: #f4f4f4;
    cursor: pointer;
    font-weight: bold;
    position: relative;
  }
  th:hover {
    background-color: #e2e2e2;
  }
  th span {
    position: absolute;
    right: 10px;
    font-size: 14px;
  }
  tr:hover {
    background-color: #fafafa;
  }

  button {
    padding: 6px 12px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-right: 10px;
  }
  button:hover {
    background-color: #45a049;
  }
  button:disabled {
    background-color: #dcdcdc;
    cursor: not-allowed;
  }
  button:last-child {
    margin-right: 0; 
  }
  .dialog-overlay{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 30px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    width: 400px;
    z-index: 1000;
  }
  .dialog h3 {
    margin-bottom: 20px;
    text-align: center;
    font-size: 20px;
    color: #333;
  }
  .dialog p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  .dialog button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
  }
  .dialog button:hover {
    background-color: #0056b3;
  }

  .close {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 30px;
    cursor: pointer;
    color: #333;
  }
  .message1 {
    color: green;
    font-size: 1rem;
    text-align: center;
    margin-top: 20px;
  }
  </style>